<template>
	<div>
		</br>
		<el-row :gutter="5" align="middle" justify="center" type="flex" class="question-row">
			<el-col :span="17">
				<el-input v-model="currentTitle" placeholder="请输入问题" class="question-input" :disabled="isTitleDisabled"></el-input>
				<el-button @click="ConfirmQuestion()" type="success" icon="el-icon-check" :disabled="isTitleDisabled" circle></el-button>
			</el-col>
			<el-col :span="1">
				<el-button @click="editQuestion()" type="primary" icon="el-icon-edit" circle></el-button>
			</el-col>
		</el-row>
		<br>
		<div class="container">
			<div class="textarea-container">
				<el-input type="textarea" :autosize="{ minRows: 16, maxRows: 16}" placeholder="请输入选项(使用,可以同时添加多个)" v-model="textarea1"
				 class="textarea1"></el-input>
			</div>
			<div class="button-container">
				<el-button @click="subOption()" type="primary" plain class="button">添加</el-button>
			</div>
			<div class="table-container">
				<el-table :data="tableData" stripe style="width: 100%" class="table" max-height="350">
					<el-table-column prop="content" label="选项" width="380"></el-table-column>
					<el-table-column fixed="right" label="操作" width="100">
						<template slot-scope="scope">
							<el-button @click="OptionEdit(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
							<el-button @click="OptionDel(scope.$index, scope.row)" type="text" size="small">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

			</div>
				<!-- 编辑弹窗 -->
				<el-dialog title="编辑选项" :visible.sync="dialogVisible" width="30%">
					<el-form :model="editForm" label-width="80px">
						<el-form-item label="内容">
							<el-input v-model="editForm.content" placeholder="请输入新内容" clearable></el-input>
						</el-form-item>
					</el-form>

					<template #footer>
						<el-button @click="dialogVisible = false">取消</el-button>
						<el-button type="primary" @click="submitEdit()" :loading="isSubmitting">确定</el-button>
					</template>
				</el-dialog>			
		</div>
	</div>
</template>

<script>
	import Cookies from "js-cookie";
	export default {
		name: "AddOrEditQuestion",
		data() {
			return {
				currentTid: this.tid,
				currentTitle: this.title,
				isTitleDisabled: false, // 禁用状态控制
				input: '',
				textarea1: '',
				tableData: [],
				dialogVisible: false, // 弹窗显示状态
				editForm: { // 编辑表单数据
					oid: null,
					content: ''
				},
				isSubmitting: false // 提交加载状态
			};
		},
		props: {
			tid: {
				type: [String, Number],
				default: null
			},
			title: {
				type: [String, Number],
				default: null
			}
		},
		mounted() {
			//获取问题的选项
			this.getOption();
			//编辑模式
			if (this.tid != null && this.tid != '') {
				console.log("即将开始修改");
				this.LockQuestion();
				console.log(this.tid);
			} else {
				//新增模式
				console.log(this.tid);
			}

		},
		methods: {
			// 锁定输入			
			LockQuestion() {
				this.isTitleDisabled = true;
			},
			ConfirmQuestion(){
				let _this=this;
				//编辑
				if (this.tid != null && this.tid != '') {
					console.log("即将开始修改");
					//发送put请求
					this.$axios.put('/question', {
							
								tid: this.tid,
								title:this.currentTitle
							
						})
						.then(function(response) {
							_this.LockQuestion();
						})
						.catch(function(error) {
							console.log(error);
						});
						
					
					console.log(this.tid);
					console.log(this.currentTitle);
				} else {
					const loginName = Cookies.get("loginName");
					//新增
					this.$axios.post('/question?loginName=' + loginName, {
							
								
								title:this.currentTitle
							
						})
						.then(function(response) {
							_this.LockQuestion();
							_this.currentTid=response.data;
							console.log(response.data);
						})
						.catch(function(error) {
							console.log(error);
						});
					// console.log(this.tid);
					console.log(this.currentTitle);
				}
			},
			editQuestion(){
				this.isTitleDisabled = false;
			},
			getOption() {
				let _this = this;
				const tid = _this.currentTid;
				this.$axios
					.get('/option/' + tid)
					.then(function(response) {
						_this.tableData = response.data; // 存储全部数据
						// _this.updateTableData(); // 更新显示数据
						// console.log('接口返回数据：', response.data); // 查看实际数据结构
					})
			},
			subOption() {

				let _this = this;
				const options = _this.textarea1;
				// 1. 分割并处理字符串
				const items = options.split(',')
					.map(s => s.trim()) // 去除每个元素前后空格
					.filter(s => s !== ''); // 过滤空字符串

				// 存储所有请求的Promise对象
				const requests = items.map(item => {
					return this.$axios.post('/option', {
						tid: this.currentTid,
						content: item
					});
				});

				// 统一处理所有请求
				Promise.all(requests)
					.then(() => {
						alert(`成功添加 ${items.length} 个选项`); // 所有请求成功时触发
					})
					.catch(error => {
						console.log(error);
						alert('添加失败，请检查网络或数据'); // 任意请求失败时触发
					});
				this.textarea1 = "";
				this.getOption();
			},
			OptionDel(index, row) {
				let _this = this;
				if (confirm("确定删除" + row.content + "吗?")) {
					this.$axios.delete('/option', {
							params: { // 使用params配置项传递参数
								oid: row.oid
							}
						})
						.then(function(response) {
							_this.getOption();
						})
						.catch(function(error) {
							console.log(error);
						});
				}

			},
			// 打开编辑弹窗
			OptionEdit(index, row) {
				this.dialogVisible = true
				// 深拷贝当前行数据到表单（重要！）
				// this.editForm = {
				//     oid: row.oid,
				//     content: row.content
				//   };
				this.editForm = JSON.parse(JSON.stringify(row));
			},
			submitEdit() {
				let _this = this;
				try {
					this.isSubmitting = true
					// _this = this;
					// 发送 PUT 请求
					console.log("即将开始修改");
					this.$axios.put('/option', {
							oid: this.editForm.oid,
							content: this.editForm.content
						});

					//重新获取数据
					this.$message.success('修改成功');
					_this.getOption();
					this.dialogVisible = false
				} catch (error) {
					this.$message.error(error|| '更新失败')
				} finally {
					this.isSubmitting = false
				}
				
			}

		}


	};
</script>

<style>
	.question-input .el-input__inner {
		width: 800px;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		/* 可选：圆角与按钮风格统一 */
	}

	.el-col {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中（可选） */
	}

	.textarea1 .el-textarea__inner {
		flex: 0 0 30%;
		/* 固定宽度 */
		min-width: 400px;
		/* 最小宽度 */
	}

	.container {
		display: flex;
		flex-direction: row;
		/* 保持水平排列 */
		align-items: flex-start;
		/* 顶部对齐 */
		gap: 20px;
		/* 元素间距 */
		justify-content: center;
		/* 新增 */
		margin: 0 auto;
		/* 新增 */
	}

	.textarea-container {
		display: flex;
		flex-direction: column;
		/* 垂直排列 */

	}

	.button-container {
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
		margin: 0 10px;
		/* 与两侧元素间距 */
		margin-top: 100px;
	}

	.button {
		width: 80px;
		height: 40px;
		/* 固定按钮高度 */
		padding: 12px 20px;
		/* 调整内边距 */
	}



	.table-container {
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
	}

	/* 可选：美化滚动条样式 */
	.table-container::-webkit-scrollbar {
		width: 6px;
	}

	.table-container::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 4px;
	}

	.table .el-table__inner {
		margin-left: 20px;
		/* 调整表格位置 */
	}
</style>
